<template>
  <echart :option="option"/>
</template>

<script>
export default {
  name: "energy-chart",
  props:{
    name:String,
    threshold: {
      type:String,
      default:'500'
    },
    /**
     * 01=>[1231,123,23,123]
     * 03=>[34,123,453]
     * 04=>[34,123,453]
     * ...
     */
    content:Map
  },
  data(){
    return {
      option : {},
    }
  },
  watch:{
    content:{
      handler(){
        this.content && this.content.size>0 && this.initData()
      },
      immediate:true
    }
  },
  methods: {
    getMinAndMaxNumber(keys){
      let [min,max] = [undefined,undefined]
      Array.from(keys).forEach(key=>{
        const val = parseInt(key)
        if(min === undefined){
          min = max = val
        }else{
          min > val && (min = val)
          max < val && (max = val)
        }
      })
      return [min,max]
    },
    initData(){
      const keys = this.content.keys()
      const [min,max] = this.getMinAndMaxNumber(keys)
      const [xData,data,bars] = [[],[],[]]
      for(let index = min ; index <= max; index++ ){
        const key = `${index<10?`0${index}`:index}`
        xData.push(key)
        data.push(this.content.has(key)?this.content.get(key):[])
      }
      data.forEach((group,index)=>{
        group.forEach((val,barIndex)=>{      //    0         1         2            3             4
                                             //第几系列 | Y起始位置 | Y终止位置 | 当前系列中柱索引 | 当前所在系列中柱的个数
          const bar = {name:this.name,value: [index, 0, parseInt(val), barIndex+1, group.length] }
          val > parseInt(this.threshold) && (bar.itemStyle = { normal: { color: 'red' } })
          bars.push(bar)
        })
      })
      this.initOption(bars,xData)
    },
    initOption(data,xData){
      this.option = {
        tooltip: {
          trigger: 'item'
        },
        //调大小
        grid:{
          left:'3%',
          right:'3%',
          bottom:'5%',
          top:'5%'
        },
        xAxis: {
          type: 'category',
            data: xData,
            splitArea: {},
          splitLine: { show: true }
        },
        yAxis: { type: 'value' },
        series: [
          {
            type: 'custom',
            renderItem: this.renderItem,
            itemStyle: { normal: { opacity: 0.8 } },
            encode: { y: [1, 2], x: 0 },
            data: data
          }
        ]
      }
    },
    renderItem: function(params, api) {
      let categoryIndex = api.value(0)//x轴区间位置
      let start = api.coord([categoryIndex, api.value(1)])
      let end = api.coord([categoryIndex, api.value(2)])

      //api.size获得的[当前系列的宽度（一般是一样的）,对应y值的实际高度]
      let width = api.size([0, api.value(2)])[0]*0.8 //占百分之80的宽度

      const num = api.value(4) // 每个系列柱子数
      const currentIndex = api.value(3)//当前系列的位置索引（从1开始）
      const isOdd = num % 2 === 0//偶数
      const midN = isOdd ? num / 2 : (num + 1) / 2

      let rect

      width = width / num

      let rectX = start[0] - width / 2

      const FIXED_WIDTH = 0.1 // 柱子间距

      if (num > 1) {
        const index = currentIndex - midN
        if (isOdd) {
          if (index <= 0) {
            if(currentIndex === midN){
              rectX =
                start[0] + (index - 1) * width - 0.5*FIXED_WIDTH
            }else{
              rectX =
                start[0] + (index - 1) * width - FIXED_WIDTH * (0.5-index)
            }
          } else {
            if(index === 1){
              rectX = start[0] + 0.5 * FIXED_WIDTH
            }else {
              rectX =
                start[0] + (index - 1) * width + FIXED_WIDTH * (index-0.5)
            }
          }
        } else {
          rectX = start[0] - width / 2 + index * (width + FIXED_WIDTH)
        }
      }
      rect = {
        type: 'rect',
        shape: this.echarts.graphic.clipRectByRect(
          { x: rectX, y: end[1], width: width, height: start[1] - end[1] },
          {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          }
        ),
        style: api.style()
      }
      return rect
    }
  },
}
</script>

<style scoped>

</style>
